<template>
  <div class="video-player-controls">
    <div class="icon">
      <SvgIcon
        v-if="!noShowRecord"
        @click="screenShot"
        title="截屏"
        name="video-jieping"
      ></SvgIcon>
      <SvgIcon
        v-if="!noShowRecord"
        @click="recordOperate"
        name="video-luping"
        :class="{
          'btn-red': recordType
        }"
        :title="recordType ? '结束' : '录屏'"
      ></SvgIcon>
      <SvgIcon @click="fullscreen" name="video-quanping" title="全屏"></SvgIcon>
      <SvgIcon @click="closeVideo" name="video-guanbi" title="关闭"></SvgIcon>
    </div>
  </div>
</template>

<script lang="ts">
/* eslint-disable */
// @ts-nocheck
import { defineComponent, ref, watch } from 'vue'
// import {Additional} from './index'
export default defineComponent({
  props: {
    additional: {
      type: Array,
      default: []
    },
    noShowRecord: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    watch(
      () => props.url,
      (newVal, oldVal) => {
        if (newVal !== oldVal) {
          recordType.value = false
        }
      }
    )
    const recordType = ref(false)
    const screenShot = () => {
      emit('screenShot')
    }
    const recordOperate = () => {
      recordType.value = !recordType.value
      emit('recordOperate', recordType)
    }

    const fullscreen = () => {
      emit('fullscreen')
    }
    const closeVideo = () => {
      emit('closeVideo')
    }
    const handleClick = (event: string) => {
      emit('handleClick', event)
    }
    return {
      screenShot,
      recordOperate,
      fullscreen,
      closeVideo,
      recordType,
      handleClick
    }
  }
})
</script>

<style lang="less" scoped>
.video-player-controls {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: none;

  :deep(.svg-icon) {
    margin-right: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    color: blue;

    &:hover {
      color: #f00;
    }
  }

  :deep(.btn-red) {
    .svg-icon {
      color: #f00 !important;
    }
  }
}
</style>
